<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="css/style.css" rel="stylesheet">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
</head>

<body>

	<div class="wrapper">

		<header class="header">
			<img src="css/globeglass.png"/>
			<div id="title" style="width:800px; margin:auto">
				<h1>GDELT 事件可视化 Demo</h1>
				<!--div id="tech" style="margin:  0 auto 0 auto; width:260px;">
					Google Big Query - Node - Express - Leaflet
				</div-->
			</div>
		</header>


		<div class="middle">

			<div class="container">
				<main class="content">
					<div id="#mapContainer">

						<span><strong>可视化结果: </strong></span>
						<span id="bqresponse">没有数据.</span>

						<div id="leafletmap">
							<p>地图</p>
						</div>

						<div id="legend" style="margin-top:10px; display:none;"><strong>图例:</strong>
						每一个圆圈代表一个GDELT事件发生位置<!--i>action location</i-->. <span style="color:red;">红色</span>
						代表负面语气<span style="color:DarkBlue;">蓝色</span>代表正面语气.半径基于语气的大小。圆圈是部分透明的，所以较暗的区域代表许多重叠的数据。
						</div>

					</div>
				</main>
			</div>

			<aside class="left-sidebar">


				<div style="margin-top: 10px;">
					<p><strong>保存的数据集:</strong></p>
				</div>

				<div>
					<p style="margin-top: 0px">下面的按钮将呈现从Global Database of Events, Languages and Tone <a href="http://www.gdeltproject.org/" target="_blank">(GDELT)</a>中采样的数据.</p>
				</div>


				<div style="margin-top: 10px">
					<form id="gdeltmockform">
						<button id="bqgdeltmockbtn" class="send" enabled>2,000 个事件</button>
						<div id="mockspin" class="buttonspin"></div>
					</form>
				</div>

				<div style="margin-top: 5px">
					<form id="gdeltmockform2">
						<button id="bqgdeltmockbtn2" class="send" enabled>10,000 个事件</button>
						<div id="mockspin2" class="buttonspin"></div>
					</form>
				</div>

				<div style="margin-top: 5px">
					<form id="gdeltmockform3">
						<button id="bqgdeltmockbtn3" class="send" enabled>15,000 个事件</button>
						<div id="mockspin3" class="buttonspin"></div>
					</form>
				</div>


				<!--div style="margin-top: 30px;">
					<p><strong>Google Big Query:</strong></p>
				</div>

				<div>
					<p style="margin-top: 0px"> Use this form to render one day's worth of GDELT event data by
					    sending a request to the <a href="https://cloud.google.com/bigquery/bigquery-web-ui" target="_blank">
						Google&nbsp;Big&nbsp;Query</a> API.
					</p>
				</div-->

				<div style="margin-top: 10px">
					<form id="bqApiForm">
						<div style="margin-bottom:6px;">
							事件日期 (日/月/年):
						</div>
						<input type="text" name="dayinput" id="dayinput" value="1" style="width:25px;
						margin-left:4px; margin-bottom:5px;">
						<select name="monthselect" class="select-style" style="width:50px;">
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
						</select>
						<select name="yearselect" class="select-style" style="width:65px;">
							    <option value="2017">2017</option>
									<option value="2016">2016</option>
									<option value="2015">2015</option>
									<option value="2014">2014</option>
									<option value="2013">2013</option>
									<option value="2012">2012</option>
									<option value="2011">2011</option>
									<option value="2010">2010</option>
									<option value="2005">2005</option>
									<option value="1995">1995</option>
									<option value="1990">1990</option>
									<option value="1980">1980</option>
						</select>

						<div>事件数量限制:
									<input type="text" id="bqlimit" name="eventlimit" value="1000" style="width:50px; margin-left:6px;">
						</div>

						<div style="margin-top: 10px">
									<button id="bqgdeltbtn" class="send" enabled>提交请求</button>
									<div id="gdeltspin" class="buttonspin"></div>
						</div>

					</form> <!-- bqApiForm -->
				</div>

				<div style="margin-top: 30px;">
					<p><strong>地图工具:</strong></p>
				</div>


				<div style="margin-top: 10px">
					<form id="clearform">
						<button id="resetbtn" class="clr">清除地图</button>
					</form>
				</div>


				<!--div style="margin-top:50px; color: #999;">
					Doug Murphy &nbsp;&nbsp;&nbsp;2016<br>
				</div-->

			</aside><!-- .left-sidebar -->

		</div><!-- .middle-->

	</div><!-- .wrapper -->

	<script src="/js/jquery.min.js"></script>
	<script src="/js/go.js"></script>
	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

</body>
</html>
